<template>
  <view class="u-navbar">
    <view
      class="u-navbar__placeholder"
      v-if="fixed && placeholder"
      :style="{
        height: $u.addUnit($u.getPx(height) + $u.sys().statusBarHeight, 'px'),
      }"
    ></view>
    <view :class="[fixed && 'u-navbar--fixed']">
      <u-status-bar v-if="safeAreaInsetTop" :bgColor="bgColor"></u-status-bar>

      <view
        class="u-navbar__content"
        :class="[border && 'u-border-bottom']"
        :style="[
          {
            height: $u.addUnit(height),
            backgroundColor: bgColor,
            backgroundImage: backgroundImage,
          },
          navbarInnerStyle,
        ]"
      >
        <view
          class="u-navbar__content__left"
          hover-class="u-navbar__content__left--hover"
          hover-start-time="150"
          @tap="leftClick"
        >
          <slot name="left">
            <u-icon
              v-if="leftIcon"
              :name="leftIcon"
              :size="leftIconSize"
              :color="leftIconColor"
            ></u-icon>
            <text
              v-if="leftText"
              :style="{
                color: leftIconColor,
              }"
              class="u-navbar__content__left__text"
            >
              {{ leftText }}
            </text>
          </slot>
        </view>
        <slot name="center">
          <text
            class="u-line-1 u-navbar__content__title"
            :style="[
              {
                width: $u.addUnit(titleWidth),
              },
              $u.addStyle(titleStyle),
            ]"
          >
            {{ title }}
          </text>
        </slot>
        <view
          class="u-navbar__content__right"
          :style="[
            {
              right: rightButtonWidth,
            },
          ]"
          v-if="$slots.right || rightIcon || rightText"
          @tap="rightClick"
        >
          <slot name="right">
            <u-icon v-if="rightIcon" :name="rightIcon" size="20"></u-icon>
            <text v-if="rightText" class="u-navbar__content__right__text">
              {{ rightText }}
            </text>
          </slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import props from "./props.js";
  /**
   * Navbar 自定义导航栏
   * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
   * @tutorial https://www.uviewui.com/components/navbar.html
   * @property {Boolean}			safeAreaInsetTop	是否开启顶部安全区适配  （默认 true ）
   * @property {Boolean}			placeholder			固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
   * @property {Boolean}			fixed				导航栏是否固定在顶部 （默认 false ）
   * @property {Boolean}			border				导航栏底部是否显示下边框 （默认 false ）
   * @property {String}			leftIcon			左边返回图标的名称，只能为uView自带的图标 （默认 'arrow-left' ）
   * @property {String}			leftText			左边的提示文字
   * @property {String}			rightText			右边的提示文字
   * @property {String}			rightIcon			右边返回图标的名称，只能为uView自带的图标
   * @property {String}			title				导航栏标题，如设置为空字符，将会隐藏标题占位区域
   * @property {String}			bgColor				导航栏背景设置 （默认 '#ffffff' ）
   * @property {String | Number}	titleWidth			导航栏标题的最大宽度，内容超出会以省略号隐藏 （默认 '400rpx' ）
   * @property {String | Number}	height				导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）
   * @property {String | Number}	leftIconSize		左侧返回图标的大小（默认 20px ）
   * @property {String | Number}	leftIconColor		左侧返回图标的颜色（默认 #303133 ）
   * @property {Boolean}	        autoBack			点击左侧区域(返回图标)，是否自动返回上一页（默认 false ）
   * @property {Object | String}	titleStyle			标题的样式，对象或字符串
   * @event {Function} leftClick		点击左侧区域
   * @event {Function} rightClick		点击右侧区域
   * @example <u-navbar title="剑未配妥，出门已是江湖" left-text="返回" right-text="帮助" @click-left="onClickBack" @click-right="onClickRight"></u-navbar>
   */
  let menuButtonInfo = {};
  // bottom: 56,
  //   height: 32,
  //   left: 281,
  //   right: 368,
  //   top: 24,
  //   width: 87,
  // 获取系统状态栏的高度
  let systemInfo = uni.getSystemInfoSync();
  //#ifdef MP-ALIPAY
  systemInfo.statusBarHeight = 0;
  //#endif
  // 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
  // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
  menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  // #endif
  console.log(menuButtonInfo);
  export default {
    name: "u-navbar",
    mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
    data() {
      return {
        menuButtonInfo: menuButtonInfo,
      };
    },
    computed: {
      rightButtonWidth() {
        let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
        return rightButtonWidth + "px";
      },
      // 导航栏内部盒子的样式
      navbarInnerStyle() {
        let style = {};
        // 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
        // style.height = Number(this.navbarHeight) * 2 + "rpx";
        // // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
        // #ifdef MP
        let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
        style.paddingRight = rightButtonWidth + "px";

        // #endif

        return style;
      },
      // 整个导航栏的样式
      navbarStyle() {
        let style = {};
        style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar;
        // 合并用户传递的背景色对象
        Object.assign(style, this.background);
        return style;
      },
      // // 导航中间的标题的样式
      // titleStylecomputed() {
      //   let style = {};
      //   // #ifndef MP
      //   style.left =
      //     (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + "px";
      //   style.right =
      //     (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + "px";
      //   // #endif
      //   // #ifdef MP
      //   // 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的
      //   let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
      //   style.left =
      //     (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + "px";
      //   style.right =
      //     rightButtonWidth -
      //     (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 +
      //     rightButtonWidth +
      //     "px";
      //   // #endif
      //   style.width = uni.upx2px(this.titleWidth) + "px";
      //   return style;
      // },
      // 转换字符数值为真正的数值
      navbarHeight() {
        // #ifdef APP-PLUS || H5
        return this.height ? this.height : 44;
        // #endif
        // #ifdef MP
        // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
        // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
        // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
        let height = systemInfo.platform == "ios" ? 44 : 48;
        return this.height ? this.height : height;
        // #endif
      },
    },
    methods: {
      // 点击左侧区域
      leftClick() {
        // 如果配置了autoBack，自动返回上一页
        this.$emit("leftClick");
        if (this.autoBack) {
          uni.navigateBack();
        }
      },
      // 点击右侧区域
      rightClick() {
        this.$emit("rightClick");
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import "../../libs/css/components.scss";

  .u-navbar {
    &--fixed {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 11;
    }

    &__content {
      @include flex(row);
      align-items: center;
      height: 44px;
      background-color: #9acafc;
      position: relative;
      justify-content: center;
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      &__left,
      &__right {
        padding: 0 16px;
        position: absolute;
        top: 0;
        bottom: 0;
        @include flex(row);
        align-items: center;
      }

      &__left {
        left: 0;

        &--hover {
          opacity: 0.7;
        }

        &__text {
          font-size: 15px;
          margin-left: 3px;
        }
      }

      &__title {
        text-align: center;
        font-size: 16px;
        color: $u-main-color;
      }

      &__right {
        right: 0;

        &__text {
          font-size: 15px;
          margin-left: 3px;
        }
      }
    }
  }
</style>
